<template>
  <div class="app">
    <h1>{{ msg }},学生姓名{{ studentName }}</h1>
    <!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 -->
    <SchoolSchool :getSchoolName="getSchoolName"></SchoolSchool>
    <hr />
    <!-- 给vc绑定event自定义事件，给谁绑定事件，找谁触发-->
    <!-- <StudentStudent v-on:event="getStudentName" @demo="m1"></StudentStudent><hr/> -->

    <!-- 使用ref -->
    <!-- <StudentStudent ref="StudentStudent"></StudentStudent> -->

    <StudentStudent ref="StudentStudent" @click.native="show"></StudentStudent>

    <hr />
  </div>
</template>

<script>
import StudentStudent from "./components/Student";
import SchoolSchool from "./components/School";
// 引入顺序改变背景颜色
export default {
  name: "App",
  components: {
    StudentStudent,
    SchoolSchool,
  },
  data() {
    return {
      msg: "hello",
      studentName: "",
    };
  },
  methods: {
    getSchoolName(name) {
      console.log(name);
    },
    // getStudentName(name, ...rest) {
    //   console.log(name, rest);
    //   this.studentName = name;
    // },
    m1() {
      console.log("demo触发");
    },
    show() {
      console.log("show()");
    },
  },
  mounted() {
    // this是vc
    // this.$refs.StudentStudent.$on("event", this.getStudentName);
    // 箭头函数
    this.$refs.StudentStudent.$on("event", (name, ...rest) => {
      console.log("app收到了学生姓名", name, rest);
      console.log(this);
      this.studentName = name;
    });
  },
};
</script>

<style scoped>
.app {
  background-color: grey;
}
</style>

